import React, { useState } from 'react'
import { Col, Input, Row, Button, Cascader } from 'antd';
import {
  HomeOutlined,
  CloudUploadOutlined,
  SearchOutlined
} from '@ant-design/icons';
import '../scss/OverDue.scss'
import OverDueList from './OverDueList'
import { GetoverdueSearch } from '../../../../http/dutoApi'
import { useDispatch, useSelector } from 'react-redux'
import { GetoverdueSearchAsyncAction } from '../../../../store/dotoStore/action'

export default function OverDue() {


  const [search1, setsearch] = useState('')
  const [pageSize, setPageSize] = useState('5')
  const [pageSizeNow, setPageSizeNow] = useState('1')

  const dispatch = useDispatch()

  const [options, setoption] = useState([
    {
      value: 'normall',
      label: '正常类',
    },
    {
      value: 'suspicious',
      label: '可疑类',
    },
    {
      value: 'secondary',
      label: '次级类',
    },
    {
      value: 'loss',
      label: '损失类',
    },
    {
      value: 'focus',
      label: '关注类',
    }
  ])

  const onChange = (e) => {
    // console.log(e.target.value);
  }
  const onChange2 = (e) => {
    console.log(e.target.value);
    setsearch(e.target.value)
  }
  const onChange3 = (e) => {
    // console.log(e.target.value);
  }
  const onChange4 = (e) => {
    // console.log(e);
  }
  const search = () => {
    console.log('submint');
    // GetoverdueSearch(pageSizeNow,pageSize,search1)
    dispatch(GetoverdueSearchAsyncAction({
      pageSizeNow,
      pageSize,
      search1
    }))
      .then((res) => {
        console.log('请求成功', res);
      })
      .catch((err) => {
        console.log('请求失败', err);
      })
  }

  return (
    <div className="OverDue">
      <div className='OverDue-icon'>
        <HomeOutlined className='OverDue-home' />
        <p>首页 / 催收管理 / 已逾期列表</p>
      </div>

      <div className='OverDue-search'>
        <Row gutter={24}>
          <Col span={4}>
            <Input defaultValue="" placeholder='姓名/手机号' onChange={onChange} />
          </Col>

          <Col span={5}>
            <Input defaultValue="" placeholder='借款编号' onChange={onChange2} />
          </Col>

          <Col span={5}>
            <Input defaultValue="" placeholder='合同号' onChange={onChange3} />
          </Col>

          <Col span={5}>
            <Cascader placeholder="合同分类" options={options} onChange={onChange4} size='middle' className='Cascaders' />
          </Col>

          <Button type="default" onClick={search}>
            <SearchOutlined /> 查询
          </Button >
        </Row>
      </div>

      <div className='OverDue-title'>
        <p>数据列表</p>
        <Button className='OverDue-button'><CloudUploadOutlined className="OverDue-icon" />上传</Button>
      </div>

      <OverDueList />


    </div>
  )
}
